<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../utils/font/iconfont.css" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../../utils/bootstrap.min.css" />
    <script src="../../utils/jquery-3.6.0.js"></script>
    <script src="../../utils/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../../style/technical-data/data-type.css" />
  </head>
  <body>
    <div class="container">
    <!-- 头部 -->
      <div class="header">
        <h1>维修调度管理系统</h1>
        <div class="user">
          <img src="../../images/user.png" class="img-circle" />
          <span>用户名</span>
        </div>
      </div>
      <div class="body">
        <!-- 左边导航栏 -->
        <div class="nav">
          <ul>
            <li>
              <span class="iconfont icon-control"></span>
              <span class="firstMenuText">控制台</span>
            </li>
            <li>
              <span class="iconfont icon-equipment"></span>
              <sp class="firstMenuText">装备管理</sp>
            </li>
            <li>
              <span class="iconfont icon-warehouse"></span>
              <sp class="firstMenuText">仓库管理</sp>
            </li>
            <li>
              <span class="iconfont icon-fix"></span>
              <span class="firstMenuText">维修管理</span>
            </li>
            <li>
              <span class="iconfont icon-personnel"></span>
              <span class="firstMenuText">人员管理</span>
            </li>
            <li>
              <span class="iconfont icon-data"></span>
              <span class="firstMenuText">数据统计</span>
            </li>
            <li>
                <div
                class="firstMenu"
                data-toggle="collapse"
                data-target="#dataMenu"
              >
                <span class="iconfont icon-technicalData"></span>
                <span class="firstMenuText">技术资料</span>
            </div>
            <ul class="secondMenu collapse" id="dataMenu">
              <li><a href="javascript:">资料类型</a></li>
              <li><a href="./data-management.html">资料管理</a></li>
            </ul>
            </li>
            <li>
                <span class="iconfont icon-rules"></span>
                <span class="firstMenuText">规章制度</span>
            </li>
            <li>
              <span class="iconfont icon-setting"></span>
              <span class="firstMenuText">系统管理</span>
            </li>
          </ul>
        </div>
        <!-- 右边内容 -->
        <div class="content">
          <div class="contentBox">
            <div class="title">
              <h2>装备分类</h2>
              <div class="classify">
                <button class="add-classify">添加分类</button>
              </div>
            </div>
            <!-- 表格 -->
            <table class="table">
              <thead>
                <tr>
                  <th>类别名称</th>
                  <th>资料数</th>
                  <th>更新时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                    <td>维修手册</td>
                    <td>56</td>
                    <td class="update">2022-8-24</td>
                    <td>
                        <button class="btn btn-primary edit">编辑</button>
                        <button class="btn btn-danger del">删除</button>
                    </td>
                </tr>
              </tbody>
            </table>
            <!-- 分页器 -->
            <div class="paginationBox">
              <ul class="pagination">
                <li id="paginationLeft">
                  <a href="#">&laquo;</a>
                </li>
                <li id="paginationRight">
                  <a href="#">&raquo;</a>
                </li>
              </ul>
            </div>
            <!-- 添加分类 -->
            <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增分类</h4>
                  </div>
                  <div class="modal-body">
                      <span><span>分类名称</span> <input type="text" name="" class="addDataName" placeholder="请输入分类名称"></span>    
                      <span><span>资料数</span>  <input type="text" name="" class="addDataNum" placeholder="请输入数量"></span>    
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary confirmAdd">确定</button>
                  </div>
                </div>
              </div>
            </div>
          <!-- 编辑分类 -->
          <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">编辑分类</h4>
                </div>
                <div class="modal-body">
                    <span class="editDataId"></span>
                    <span><span>分类名称</span> <input type="text" name="" class="editDataName" placeholder="请输入分类名称"></span>    
                    <span><span>资料数</span>  <input type="text" name="" class="editDataNum" placeholder="请输入数量"></span>    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirmEdit">确定</button>
                </div>
              </div>
            </div>
          </div>
          <!-- 删除分类 -->
          <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">删除确认</h4>
                </div>
                <div class="modal-body">
                    <span class="delDataId"></span>
                    <span>删除该条客户信息后将不可恢复，确认删除？</span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirmDel">确定</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="../../js/technical-data/data-type.js"></script>
  </body>
</html>
